<template>
    <div class="box" :type="type" @click="playVideo">
        <img :src="thumb" alt="">
        <div class="btn"><img src="../assets/player.png" alt=""></div>

        <van-popup :lazy-render="false" v-model="videoShow" @click.stop="eventStop">
            <video :id="'video'+times" ref="video" :poster="thumb">
                <source :src="video" type="video/mp4" />
            </video>    
        </van-popup>
    </div>
</template>

<script>
//   var createPlayer = require('web-audio-player')
  import { PlyrVideo } from 'vue-plyr'
  import 'vue-plyr/dist/vue-plyr.css'
  var audioObj = {};
  export default {
      data:function(){
          return {
              videoShow:false
          }
      },
      props: ['video','type','times','thumb'],
      components:{
          PlyrVideo
      },
      created:function(){
        //   audioObj['audio'+this.times] = createPlayer(this.audiopath);

      },
      methods:{
          eventStop:()=>{

          },
          playVideo:function(e){
              console.log('播放视频');
              this.videoShow = !this.videoShow;
              var video = document.getElementById('video'+this.times);
              console.log(video);
                if(this.videoShow){
                    video.play();
                }else{
                    video.load();
                }
              
          }
      }

  };
</script>

<style lang="less" scoped>
    .box{
        position: relative;
        img{
            width:120px;
        }
        .btn{
            position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);
            width:60px;height:60px;
            img{
                width:100%;height:100%;
            }
        }
        .van-popup{
            width:100%;height:100%;background:none;
        }
        video{
            position: absolute; max-width:100%;max-height: 70%;top:50%;left:50%;transform: translate(-50%,-50%);
        }
    }
</style>